// 判断本地是否有token
// 没有token的时候
if (localStorage.getItem("token") == null) {
  location.href = "/login.html"
}


layui.use(['layer'], function () {
  let layer = layui.layer;

  // ------ 添加 ------
  $(".new-todo").on("keydown", function (e) {
    if (e.keyCode == 13) {

      let val = $(".new-todo").val();
      if (val == "") {
        layer.msg("计划不能为空");
        return;
      }

      $.ajax({
        type: "POST",
        url: "/todo/add",
        data: {
          content: val,
          isdone: 0, //默认没有完成
        },
        success: function (res) {
          layer.msg(res.message);

          if (res.status == 0) {
            $(".new-todo").val("")

            // list
            list();
          }
        }
      });

    }
  });

  // ------ 渲染 ------
  function list() {
    $.ajax({
      type: "GET",
      url: "/todo/list",
      success: function (res) {
        console.log(res);
        if (res.status == 0) {
          let str = "";
          $("ul").html(str);
          res.arr.forEach(ele => {
            str += `<li class=${ele.isdone == 1 ? 'completed' : ""}>
                      <div class="view">
                        <input class='toggle' type="checkbox" ${ele.isdone == 1 ? 'checked' : ''} _id=${ele.id} _isdone=${ele.isdone}>
                        <label>${ele.content}</label>
                        <button class="destroy" _id=${ele.id}></button>
                      </div>
                      <input class="edit" value="Create a TodoMVC template" _id=${ele.id}>
                    </li>`
          });
          $("ul").html(str);
        }
      }
    });
  }
  list();

  // ------ 删除 ------
  $("ul").on("click", ".destroy", function () {
    let id = $(this).attr("_id")
    $.ajax({
      type: "GET",
      url: "/todo/del/" + id,
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });
  });

  // ------ 更新状态 ------
  $("ul").on("click", ".toggle", function () {
    let id = $(this).attr("_id");
    let isdone = $(this).attr("_isdone") == 1 ? 0 : 1;

    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: {
        id: id,
        isdone: isdone
      },
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });
    $(this).parents("li").toggleClass("completed");
  });

  // ------ 更新内容 ------
  $("ul").on("dblclick", "label", function () {
    // 1.给父级添加类名
    $(this).parents("li").addClass("editing");

    // 2.中间文字  跑到  了新出来input
    let str = $(this).text();

    // 3.找父级下一个兄弟   
    $(this).parent().next().val(str);
  });
  $("ul").on("blur", ".edit", function () {
    // 1.li去掉样式
    $(this).parent().removeClass("editing");

    // 2. 输入框的值  跑到  文字部分
    let id = $(this).attr("_id");
    let val = $(this).val();
    if (val == "") {
      layer.msg("计划不能为空");
      return;
    }
    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: {
        id: id,
        content: val
      },
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });
  })
});